<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">  
	    <title>管理员登录页面</title>
        <meta name="description" content="">
        <meta name="author" content="templatemo">
        
	    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700' rel='stylesheet' type='text/css'>
	    <link href="${pageContext.request.contextPath}/back/css/font-awesome.min.css" rel="stylesheet">
	    <link href="${pageContext.request.contextPath}/back/css/bootstrap.min.css" rel="stylesheet">
	    <link href="${pageContext.request.contextPath}/back/css/templatemo-style.css" rel="stylesheet">
	    
	    
	</head>
	<body class="light-gray-bg">
		<div id="login"class="templatemo-content-widget templatemo-login-widget white-bg">
			<header class="text-center">
	          <div class="square"></div>
	          <h1>管理员登录</h1>
	        </header>
	        <form id="managerlogin" action="${pageContext.request.contextPath}/ManagerServlet" class="templatemo-login-form" method="post">
	        <!--  隐藏域 -->
	        <input type="hidden" name="op" value="login">
	        	<div class="form-group">
	        		<div class="input-group">
		        		<div class="input-group-addon"><i class="fa fa-user fa-fw"></i></div>	        		
		              	<input type="text" class="form-control" placeholder="工号或者姓名" name="managernum">           
		          	</div>	
	        	</div>
	        	<div class="form-group">
	        		<div class="input-group">
		        		<div class="input-group-addon"><i class="fa fa-key fa-fw"></i></div>	        		
		              	<input type="password" class="form-control" placeholder="请输入密码" name="managerpsw">           
		          	</div>	
	        	</div>	          	
	          	<div class="form-group">
				    <div class="checkbox squaredTwo">
				        <input type="checkbox" id="c1" name="rememberPassword" value="rememberPassword" />
						<label for="c1"><span></span>记住密码</label>
				    </div>				    
				</div>
				<div class="form-actions">
                    
                    <button type="submit" class="templatemo-blue-button width-100">登录</button>
                </div>
	        </form>
		</div>
	     <script src="${pageContext.request.contextPath}/back/js/jquery-1.11.2.min.js"></script>   
         <script src="${pageContext.request.contextPath}/back/js/jquery-migrate-1.2.1.min.js"></script> 
		
		<script>
        	// 如果登录失败会弹出一个提示框
        	var loginErrorMessage = "${param.loginErrorMessage}"; // ${param.参数名} EL表达式获取页面参数值
        	if(loginErrorMessage != ""){
        		alert("用户名或密码错误,请重新登录!");
        	}
        </script>
        
        <!--    多用户的记住密码 -->
     <script type="text/javascript">
    		$(document).ready(function(){
    			
    			// 对管理员工号输入框做失去焦点事件，当输入完后，判断cookie中是否存在该工号对应的name，如果有则返回value
    			$("input[name='managernum']").blur(function(){
    				var managernum = $(this).val(); // adminId表示用户输入的登录账号
    				// 获取cookie指定name的value值
    				var managerpsw = getCookie(managernum);// 登录账号是cookie中的name
    				// 获取成功
        			if(managerpsw != ""){
        				// 填充数据
        				$("input[name='managerpsw']").val(managerpsw);
        				$("input[name='rememberPassword']").prop("checked",true);
        			}else{
        				$("input[name='managerpsw']").val("");
        				$("input[name='rememberPassword']").prop("checked",false);
        			}
    			});
    		})
    		// 自定义函数
    		// 通过cookie中指定的key,获取对应value值。
    		function getCookie(cname){
    			
    			var name = cname + "=";  
    				
    			var ca = document.cookie.split(';');
    			
    			for(var i = 0; i < ca.length; i++) {
    				
    				var c = ca[i].trim();  
    			
    				if (c.indexOf(name)==0) {  
    					
    					return c.substring(name.length,c.length);  
    				}
    			}
    			return "";
    		}
    		
    </script>
	</body>
</html>